<%@include file="/WEB-INF/header3.jsp"%>
<%@ page pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-table.min.css" rel="stylesheet">
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.min.js"></script>
<script src="../js/bootstrap-table-zh-CN.min.js"></script>
<style type="text/css">
#table-1 thead, #table-1 tr {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #a8bfde;
}
#table-1 {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #a8bfde;
}
/* Padding and font style */
#table-1 td, #table-1 th {
	padding: 5px 10px;
	font-size: 12px;
	font-family: Verdana;
	color: #5b7da3;
}
/* Alternating background colors */
#table-1 tr:nth-child(even) {
	background: #d3dfed
}
#table-1 tr:nth-child(odd) {
	background: #FFF
}
</style>
<script type="text/javascript">
$("img").click(function(){
    var at=$(this).attr("src")
    $("#touimg").attr("src",at)
})
	
	function editmembers(member_id) {
		$.post("${pageContext.request.contextPath}/getMemberById.action",{"member_id":member_id},function(data){
	         $("#edit_member_name").val(data.member_name);
	         $("#edit_member_birthday").val(data.member_birthday);
	         $("#edit_member_sex").val(data.member_sex);
	         $("#edit_member_phone").val(data.member_phone);	         
	         $("#edit_member_address").val(data.member_address);
	         $("#edit_member_father").val(data.member_father);	         
	         $("#edit_member_mother").val(data.member_mother);
	         $("#edit_member_mate").val(data.member_mate);	         
	         $("#edit_member_girl").val(data.member_girl);
	         $("#edit_member_boy").val(data.member_boy);	
	         $("#edit_member_id").val(data.member_id);
		});
	}
	function updatemembers() {
		$.post("${pageContext.request.contextPath}/clan/updateMember.action",$("#edit_members_form").serialize(),function(data){
			if(data =="OK"){
				alert("用户信息更新成功！");
				window.location.reload();
			}else{
				alert("用户信息更新失败！");
				window.location.reload();
			}
		});
	}

</script>
</head>
<body>
	<div id="page-wrapper">
		<table align="center" id="table-1">
			<tr>

				<th>姓名</th>
				<th>生日</th>
				<th>性别</th>
				<th>联系方式</th>
				<th>父亲</th>
				<th>母亲</th>
				<th>配偶</th>
				<th>女儿</th>
				<th>儿子</th>
				<th>操作</th>
			</tr>
				<tr>
					<td>${members.member_name}</td>
					<td>${members.member_birthday}</td>
					<td><c:choose>
							<c:when test="${members.member_sex == 0 }">女</c:when>
							<c:when test="${members.member_sex == 1 }">男</c:when>
						</c:choose></td>
					<td>${members.member_phone}</td>
					<td>${members.member_address}</td>
					<td>${members.member_mother}</td>
					<td>${members.member_mate}</td>
					<td>${members.member_girl}</td>
					<td>${members.member_boy}</td>
					<td><a href="#" class="btn btn-primary btn-xs"
						data-toggle="modal" data-target="#membersEditDialog"
						onclick="editmembers(${members.member_id})">修改</a> </td>
				</tr>
		</table>
	</div>
		<div class="modal fade" id="newmembersDialog" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">新增家族成员</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="new_members_form">
						<div class="form-group">
							<label for="new_member_user_id" class="col-sm-2 control-label">
								用户id </label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_member_user_id"
									placeholder="用户id" name="member_user_id" />
							</div>
						</div>
						<div class="form-group">
							<label for="new_member_name" class="col-sm-2 control-label">
								用户名 </label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_member_name"
									placeholder="用户名" name="member_name" />
							</div>
						</div>
						<div class="form-group">
							<label for="new_member_birthday" class="col-sm-2 control-label">生日</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_member_birthday"
									placeholder="生日" name="member_birthday"/>
							</div>
						</div>
						<div class="form-group">
							<label for="new_member_sex" class="col-sm-2 control-label">性别</label>
							<div class="col-sm-10">
								<select class="form-control" id="new_member_sex" name="member_sex">
									<option>--请选择--</option>
									<option value="0">女</option>
									<option value="1">男</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="new_member_phone" class="col-sm-2 control-label">手机号</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_member_phone"
									placeholder="手机号" name="member_phone" />
							</div>
						</div>
						<div class="form-group">
							<label for="new_member_address" class="col-sm-2 control-label">家庭地址</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_member_address"
									placeholder="家庭地址" name="member_address" />
							</div>
						</div>
						<div class="form-group">
							<label for="new_member_father" class="col-sm-2 control-label">父亲</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_member_father"
									placeholder="父亲" name="member_father" />
							</div>
						</div>
						<div class="form-group">
							<label for="new_member_mother" class="col-sm-2 control-label">母亲</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_member_mother"
									placeholder="母亲" name="member_mother" />
							</div>
						</div>
						<div class="form-group">
							<label for="new_member_mate" class="col-sm-2 control-label">配偶</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_member_mate"
									placeholder="配偶" name="member_mate" />
							</div>
						</div>
						<div class="form-group">
							<label for="new_member_girl" class="col-sm-2 control-label">女儿</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_member_girl"
									placeholder="女儿" name="member_girl" />
							</div>
						</div>
						<div class="form-group">
							<label for="new_member_boy" class="col-sm-2 control-label">儿子</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="new_member_boy"
									placeholder="儿子" name="member_boy" />
							</div>
						</div>
							<input type="hidden" name="member_clan_id"
						value="${TREE_CLAN_ID}" />
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal"
						onclick="clearmembers()">关闭</button>
					<button type="button" class="btn btn-primary"
						onclick="createmembers()">新增用户</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="membersEditDialog" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="edit_members_form">
					
						<div class="form-group">
							<label for="edit_member_name" class="col-sm-2 control-label">
								用户名 </label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_member_name"
									placeholder="用户名" name="member_name" />
							</div>
						</div>
						<div class="form-group">
							<label for="edit_member_birthday" class="col-sm-2 control-label">生日</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_member_birthday"
									placeholder="生日" name="member_birthday"/>
							</div>
						</div>
						<div class="form-group">
							<label for="edit_member_sex" class="col-sm-2 control-label">性别</label>
							<div class="col-sm-10">
								<select class="form-control" id="edit_member_sex" name="member_sex">
									<option>--请选择--</option>
									<option value="0">女</option>
									<option value="1">男</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="edit_member_phone" class="col-sm-2 control-label">手机号</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_member_phone"
									placeholder="手机号" name="member_phone" />
							</div>
						</div>
						<div class="form-group">
							<label for="edit_member_address" class="col-sm-2 control-label">家庭地址</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_member_address"
									placeholder="家庭地址" name="member_address" />
							</div>
						</div>
						<div class="form-group">
							<label for="edit_member_father" class="col-sm-2 control-label">父亲</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_member_father"
									placeholder="父亲" name="member_father" />
							</div>
						</div>
						<div class="form-group">
							<label for="edit_member_mother" class="col-sm-2 control-label">母亲</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_member_mother"
									placeholder="母亲" name="member_mother" />
							</div>
						</div>
						<div class="form-group">
							<label for="edit_member_mate" class="col-sm-2 control-label">配偶</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_member_mate"
									placeholder="配偶" name="member_mate" />
							</div>
						</div>
						<div class="form-group">
							<label for="edit_member_girl" class="col-sm-2 control-label">女儿</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_member_girl"
									placeholder="女儿" name="member_girl" />
							</div>
						</div>
						<div class="form-group">
							<label for="edit_member_boy" class="col-sm-2 control-label">儿子</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="edit_member_boy"
									placeholder="儿子" name="member_boy" />
							</div>
						</div>
							<input type="hidden" id="edit_member_id"name="member_id" />
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal"
						onclick="clearmembers()">关闭</button>
					<button type="button" class="btn btn-primary"
						onclick="updatemembers()">修改用户</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
